<!DOCTYPE html>
<html>
<head>
  <title>解析工具</title>
  <meta charset="utf-8">
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f4f7f9;
      flex-direction: column; /* 使 body 元素内容垂直排列，方便底部固定备案号 */
    }
    .container {
      width: 90%;
      max-width: 1200px;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1; /* 让 container 占据剩余空间，使 footer 固定在底部 */
    }
    textarea {
      width: 100%;
      height: 200px;
      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 14px;
    }
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #0056b3;
    }
    #result-container {
      width: 100%;
      margin-top: 20px;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 15px;
      background-color: #f9f9f9;
      position: relative; /* For copy icon positioning */
    }
    #line-count {
      margin-bottom: 10px;
      font-size: 14px;
      color: #777;
    }
    #markdown-output {
      margin-bottom: 15px;
      max-height: 300px; /* 设置最大高度 */
      overflow-y: auto; /* 添加垂直滚动条 */
      border: 1px solid #eee; /* 可选: 添加内边框，使滚动条更明显 */
      padding: 10px;       /* 可选: 添加内边距 */
      white-space: pre-line; /* 保留换行符，按行显示 */
    }
    #copy-icon {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      color: #999;
    }
    #copy-icon:hover {
      color: #666;
    }
    #copy-result-button {
      padding: 8px 16px;
      background-color: #28a745; /* 绿色按钮颜色 */
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s;
      margin-top: 10px;
    }
    #copy-result-button:hover {
      background-color: #1e7e34; /* 绿色按钮hover颜色 */
    }
    .hidden {
      display: none;
    }
    .error-popup {
      color: red;
      margin-top: 10px;
    }

    /* 备案号样式 */
    #footer {
      text-align: center;
      padding: 10px;
      font-size: 12px;
      color: #777;
      position: fixed; /* 固定在底部 */
      bottom: 0;
      width: 100%;
      background-color: #f4f7f9; /* 与 body 背景色一致 */
    }

    #footer a {
      color: #777; /* 备案号链接颜色 */
      text-decoration: none; /* 去除下划线 */
    }

    #footer a:hover {
      color: #007bff; /* 鼠标悬停时链接颜色 */
    }

  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div class="container">
  <textarea id="input-text" placeholder="请在此处输入内容"></textarea>
  <button id="parse-button">解析</button>

  <div id="result-container" class="hidden">
    <i id="copy-icon" class="fa fa-copy" title="复制结果"></i>
    <div id="line-count"></div> <div id="markdown-output"></div>
    <button id="copy-result-button" class="hidden">复制解析结果</button>
  </div>

  <div id="error-message" class="error-popup hidden"></div>

</div>

<div id="footer">
  <a href="https://beian.miit.gov.cn" target="_blank">蜀ICP备17032039号-1</a>
</div>

<script>
  // 使用 fetch 替换 $.ajax
  $(document).ready(function() {
    $("#parse-button").click(function() {
      var inputText = $("#input-text").val();
      var requestData = {
        arrayStr: inputText
      };

      const url = "http://parser-api.anmong.com/api/json";

      fetch(url, {
        method: "POST", // 对应 $.ajax 的 type
        headers: {
          "Content-Type": "application/json", // 对应 $.ajax 的 contentType
        },
        body: JSON.stringify(requestData), // 对应 $.ajax 的 data
      })
              .then(response => {
                // fetch 的一个重要区别：即使是 4xx 或 5xx 的 HTTP 错误，它也不会进入 .catch
                // 只有网络失败才会。所以我们需要检查 response.ok (它检查状态码是否在 200-299 范围内)
                if (!response.ok) {
                  // 尝试解析错误响应体，因为服务器可能会在其中返回错误信息
                  return response.json().then(errorData => {
                    // 创建一个包含服务器信息的错误对象并抛出，以便被 .catch 捕获
                    throw new Error(errorData.msg || `HTTP error! status: ${response.status}`);
                  }).catch(() => {
                    // 如果错误响应体不是JSON或解析失败，则抛出通用错误
                    throw new Error(`HTTP error! status: ${response.status}`);
                  });
                }
                return response.json(); // 对应 $.ajax 的 dataType: "json"
              })
              .then(data => {
                // 这里相当于 $.ajax 的 success 回调
                if (data.code === 200) {
                  $("#error-message").addClass("hidden");
                  $("#result-container").removeClass("hidden");
                  var markdownText = data.data;
                  // 统计行数
                  var lineCount = markdownText.split('\n').length;
                  $("#line-count").text("分镜行数: " + lineCount);

                  var html = marked.parse(markdownText);
                  $("#markdown-output").html(html);
                  $("#copy-result-button").removeClass("hidden");
                } else if (data.code === 500) {
                  // 处理API返回的业务逻辑错误
                  $("#result-container").addClass("hidden");
                  $("#copy-result-button").addClass("hidden");
                  $("#line-count").text(""); // 清空行数统计
                  $("#error-message").removeClass("hidden").text("错误: " + data.msg);
                  alert("服务器错误: " + data.msg); // 弹出错误信息
                }
              })
              .catch(error => {
                // 这里相当于 $.ajax 的 error 回调
                console.error("Fetch Error:", error);
                $("#result-container").addClass("hidden");
                $("#copy-result-button").addClass("hidden");
                $("#line-count").text(""); // 清空行数统计
                $("#error-message").removeClass("hidden").text("请求失败: " + error.message);
                alert("请求后台失败: " + error.message);
              });
    });

    // --- 复制功能部分保持不变 ---
    $("#copy-icon, #copy-result-button").click(function() {
      var markdownText = $("#markdown-output").text();
      markdownText = markdownText.trimEnd();

      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(markdownText).then(function() {
          alert("解析结果已复制到剪贴板！");
        }, function(err) {
          console.error("复制失败: ", err);
          alert("复制失败，请手动复制。");
        });
      } else {
        copyTextFallback(markdownText);
      }
    });

    function copyTextFallback(text) {
      var textArea = document.createElement("textarea");
      textArea.value = text;
      textArea.style.position = "fixed";
      textArea.style.left = "-9999px";
      textArea.style.top = "-9999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();

      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Fallback copy command was ' + msg);
        if (!successful) {
          alert("复制失败，请手动复制。");
        } else {
          alert("解析结果已复制到剪贴板！");
        }
      } catch (err) {
        console.error('Fallback copy failed', err);
        alert("复制失败，请手动复制。");
      }

      document.body.removeChild(textArea);
    }
  });
</script>

</body>
</html>